<template>
<div>
  <div class="el_swiper">
		<span v-show="LoadingBanner" class="DataLoading"><i></i>加载中...</span>
		<el-carousel>
      <el-carousel-item v-for="data in Banners" :key="data.id">
        <a :href="data.url" target="_blank"><img :src="data.pic" /></a>``
      </el-carousel-item>
    </el-carousel>
	</div>
	<el-tabs v-model="activeName" class="tradebox">
		<span v-show="LoadingDemandlist" class="DataLoading"><i></i>加载中...</span>
    <el-tab-pane label="求购" name="demand">
      <vue-seamless-scroll :data="DemandList" class="seamless-warp" :class-option="classOption">
        <ul class="demandlist">
          <li v-for="data in DemandList">
            <a :href="'http://www.tongwei.cn/trade.php?mod=view&type=buy&id=' + data.id +'&shop_id=' + data.shop_id" target="_blank">
              <div class="status">
                <div class="widthbox">
                  <span class="title elli">{{ data.kind_name }}</span>
                  <span class="fr color_orange">求购：<div class="fs_20 dp">{{ data.stock }}</div>斤</span>
                </div>
                <div class="widthbox color_8">
                  <span>{{ data.province_name }}</span>
                  <span class="fr">{{ data.updated }}</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </vue-seamless-scroll>
    </el-tab-pane>
		
    <el-tab-pane label="出售" name="supply">
      <vue-seamless-scroll :data="SupplyList" class="seamless-warp" :class-option="classOption">
        <ul class="supplylist">
          <li v-for="data in SupplyList">
          <a :href="'http://www.tongwei.cn/trade.php?mod=view&type=sell&id=' + data.id +'&shop_id=' + data.shop_id" target="_blank">
            <div class="theme" :style="{backgroundImage: 'url(' + data.img[0] + ')'}">
            </div>
            <div class="status">
              <div class="widthbox">
                <span class="title elli">{{ data.kind_name }}</span>
                <span v-if="data.price == 0" class="fr color_orange">价格面议</span>
                <span v-else class="fr color_orange"><div class="fs_20 dp">{{ data.price }}</div>元/斤</span>
              </div>
              <div class="widthbox color_8">
                <span>{{ data.province_name }}</span>
                <span class="fr">{{ data.updated }}</span>
              </div>
            </div>
          </a>
          </li>
        </ul>
      </vue-seamless-scroll>
    </el-tab-pane>
  </el-tabs>
  <div class="recomlist">
		<span v-show="LoadingRL" class="DataLoadingRL"><i></i>加载中...</span>
		<div class="rl_1st clearfix" v-for="(data,index) in recommend" v-if="index == 0" :key="data.id">
			<div class="title">
				<a :href="data.url" target="_blank" :title="data.title" v-cloak>{{ data.title }}</a>
			</div>
			<div class="pic" v-cloak>
				<a class="imgholder" :href="data.url" target="_blank">
					<img v-if="data.pic" class="imgholder_img" :src="data.pic" />
				</a>
			</div>
			<div class="word">
				<div class="status">
					<a v-cloak :href="data.caturl" target="_blank">{{ data.catname }}</a>
					<span v-cloak>{{ data.dateline }}</span>
					<span v-cloak>{{ data.viewnum }}阅读</span>
					<span v-cloak>{{ data.commentnum }}评论</span>
				</div>
				<span v-cloak class="desc"><font>{{ data.summary }}</font></span>
				<a class="readall" :href="data.url" target="_blank">阅读全文>></a>
			</div>
		</div>
		<div class="rl_2end clearfix">
			<div class="box" v-for="(data,index) in recommend" v-if="index > 0 && index < 5" :key="data.id">
				<div class="mod_imgLight">
					<a class="pic" :href="data.url" target="_blank" v-cloak><img v-if="data.pic" :src="data.pic" /></a>
				</div>
				<a class="piconlyflag" v-if="data.flag == 1" :href="data.url" target="_blank" :title="data.title" v-cloak></a>
				<a v-cloak class="text" :href="data.url" target="_blank" :title="data.title">{{ data.title }}</a>
			</div>
		</div>
		<div class="listcon clearfix">
			<div class="recom clearfix" v-for="(data,index) in recommend" v-if="index == 5" :key="data.id">
				<div class="pic mod_imgLight">
					<a :href="data.url" target="_blank" v-cloak>
						<img v-if="data.pic" :src="data.pic" />
					</a>
				</div>
				<div class="piconlyflag" v-if="data.flag == 1" v-cloak></div>
				<div class="word">
					<div class="wordcon">
						<a v-cloak class="title" :href="data.url" target="_blank">{{ data.title }}</a>
						<div class="status">
							<a v-cloak :href="data.caturl" target="_blank">{{ data.catname }}</a>
							<span v-cloak>{{ data.dateline }}</span>
							<span v-cloak>{{ data.viewnum }}阅读</span>
							<span v-cloak>{{ data.commentnum }}评论</span>
						</div>
					</div>
				</div>
			</div>
			<ul>
				<li v-for="(data,index) in recommend" v-if="index > 5 && index < 11 " :key="data.id">
					<a v-cloak class="tag" :href="data.caturl" target="_blank">{{ data.catname }}</a>
					<a v-cloak :href="data.url" target="_blank" class="elli" :title="data.title">{{ data.title }}</a>
					<span v-cloak>{{ data.dateline }}</span>
				</li>
			</ul>
			
			<div class="recom clearfix" v-for="(data,index) in recommend" v-if="index ==11 " :key="data.id">
				<div class="pic mod_imgLight">
					<a :href="data.url" target="_blank" v-cloak>
						<img v-if="data.pic" :src="data.pic" />
					</a>
				</div>
				<div class="piconlyflag" v-if="data.flag == 1" v-cloak></div>
				<div class="word">
					<div class="wordcon">
						<a v-cloak class="title" :href="data.url" target="_blank">{{ data.title }}</a>
						<div class="status">
							<a v-cloak :href="data.caturl" target="_blank">{{ data.catname }}</a>
							<span v-cloak>{{ data.dateline }}</span>
							<span v-cloak>{{ data.viewnum }}阅读</span>
							<span v-cloak>{{ data.commentnum }}评论</span>
						</div>
					</div>
				</div>
			</div>
			<ul>
				<li v-for="(data,index) in recommend" v-if="index > 11 && index < 17 " :key="data.id">
					<a v-cloak class="tag" :href="data.caturl" target="_blank">{{ data.catname }}</a>
					<a v-cloak :href="data.url" target="_blank" class="elli" :title="data.title">{{ data.title }}</a>
					<span v-cloak>{{ data.dateline }}</span>
				</li>
			</ul>
			
			<div class="recom clearfix" v-for="(data,index) in recommend" v-if="index ==17 " :key="data.id">
				<div class="pic mod_imgLight">
					<a :href="data.url" target="_blank" v-cloak>
						<img v-if="data.pic" :src="data.pic"  />
					</a>
				</div>
				<div class="piconlyflag" v-if="data.flag == 1" v-cloak></div>
				<div class="word">
					<div class="wordcon">
						<a v-cloak class="title" :href="data.url" target="_blank">{{ data.title }}</a>
						<div class="status">
							<a v-cloak :href="data.caturl" target="_blank">{{ data.catname }}</a>
							<span v-cloak>{{ data.dateline }}</span>
							<span v-cloak>{{ data.viewnum }}阅读</span>
							<span v-cloak>{{ data.commentnum }}评论</span>
						</div>
					</div>
				</div>
			</div>
			<ul class="listconspe">
				<li v-for="(data,index) in recommend" v-if="index > 17 && index < 23 " :key="data.id">
					<a v-cloak class="tag" :href="data.caturl" target="_blank">{{ data.catname }}</a>
					<a v-cloak :href="data.url" target="_blank" class="elli" :title="data.title">{{ data.title }}</a>
					<span v-cloak>{{ data.dateline }}</span>
				</li>
			</ul>
			<div class="more clearfix">
				<a href="http://www.tongwei.cn/portal.php?mod=list&catid=1" target="_blank">查看更多</a>
			</div>
		</div>
	</div>
  <div class="rightmain">
		<div class="fishask">
			<div class="title">
				<span v-cloak>鱼病防治</span>
				<a href="http://www.tongwei.cn/disease.php?mod=list" target="_blank">更多+</a>
			</div>
			<div class="con clearfix">
				<span v-show="LoadingQuestion" class="DataLoading"><i></i>加载中...</span>
				<ul>
					<li v-for="(data,index) in question" v-if="index < 7" :key="data.id">
						<div class="atitle">
						<a class="elli" :href="data.url" target="_blank" :title="data.title" v-cloak>
							<i class="rt_iconhot" v-if="data.is_hot == 1"></i>{{ data.title }}
						</a>
						</div>
						<div class="imgbox" v-if="data.img.length">
							<a class="aimg" :href="data.url" target="_blank" v-for="(subdata,index) in data.img"  v-if="index < 3" :key="subdata.id">
								<img :src="subdata" />
							</a>
						</div>
						<div class="status">
							<span class="fl" v-cloak>{{ data.created }}</span>
							<span class="fr" v-cloak>{{ data.answer_count }}回答   {{ data.page_view_count }}查看</span>
						</div>
					</li>
				</ul>
			</div>
			<div class="fishservice">
			<a @click="MQservice()"><img src="../../static/portal-img/service_mq.jpg" /></a>
			<a><img src="../../static/portal-img/service_tel.jpg" /></a>
			</div>
		</div>
		<div class="hotpart">
			<el-tabs v-model="hottabs" >
				<span v-show="LoadingHot" class="DataLoading"><i></i>加载中...</span>
				<el-tab-pane label="热门视频" name="video">
					<div class="hpcon">
						<div class="box">
							<ul class="clearfix">
								<li class="vedio" v-for="data in videos" :key="data.id">
									<a v-cloak class="title ellipsis3" :href="data.url" target="_blank" :title="data.title">{{ data.title }}</a>
									<a class="more" v-cloak>{{ data.viewnum }}次播放</a>
									<span v-cloak class="time">{{ data.length}}</span>
									<div class="pic mod_imgLight">
										<a :href="data.url" target="_blank">
											<img v-if="data.pic" :src="data.pic"/>
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="热门文章" name="article">
					<div class="hpcon">
						<div class="box">
							<ul class="clearfix">
								<li v-for="data in hots" :key="data.id">
									<a v-cloak :href="data.url"  target="_blank" :title="data.title">{{ data.title }}</a>
									<span v-cloak>{{ data.viewnum }}阅读</span>
								</li>
							</ul>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
  <div class="collist">
		<span v-show="LoadingCollist" class="DataLoadingRL"><i></i>加载中...</span>
		<div class="box" v-for="data in CatArticles" :key="data.id">
			<div class="title">
				<span v-cloak>{{ data.name}}</span>
				<a :href="data.url" target="_blank">更多+</a>
			</div>
			<div class="con">
				<ul>
					<li class="theme" v-for="(subdata,index) in data.articles" v-if="index == 0" :key="subdata.id">
						<a class="imgholder" :href="subdata.url" target="_blank" v-cloak>
							<img v-if="subdata.pic" class="imgholder_img" :src="subdata.pic" />
						</a>
						<span v-cloak class="elli" :title="subdata.title">{{ subdata.title }}</span>
					</li>
					<li v-for="(subdata,index) in data.articles" v-if="index > 0 && index < 6 " :key="subdata.id">
            <a v-cloak :href="subdata.url" :title="subdata.title" target="_blank">{{ subdata.title }}</a>
          </li>
				</ul>
			</div>
		</div>
	</div>
	<div class="friendlink clearfix">
		<div class="title">
			<span>友情链接</span>
		</div>
		<div class="box mod_imgLight" v-for="data in Friendlink" :key="data.id">
			<a :href="data.url" :title="data.name" target="_blank">
				<img :alt="data.name" :src="data.logo" />
			</a>
		</div>
	</div>
	<div class="bbsstatus">
		<div class="title">
			<span>社区概览</span>
		</div>
		<div class="box">
			<i class="iconfont icon-renqun1"></i>
			<span>总计<a v-cloak>{{ Susers.onlineNum }}</a>人在线</span>
			<span>会员总数：<a v-cloak>{{ Susers.totalMemberNum }}</a></span>
			<span><div class="fl">欢迎新会员：</div><a class="maxw elli" v-cloak>{{ Susers.newMemberName }}</a></span>
		</div>
		<div class="box">
			<i class="iconfont icon-iconfontfilesfill"></i>
			<span>社区文章：<a v-cloak>{{ Sarticles.articleNum }}</a></span>
			<span>通心号文章：<a v-cloak>{{ Sarticles.txhArticleNum }}</a></span>
			<span>水产文章总数：<a v-cloak>{{ Sarticles.crawArticleNum }}</a></span>
		</div>
	</div>

	<div class="clearfix"></div>
	<a id="gotoTop" title="返回顶部" @click="gototop()"></a>
	<div class="ask">
		<a class="contact-service" @click="MQservice()">
			<img src="../../static/portal-img/kf.png"/>
		</a>
	</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  data() {
    return {
      Banners: [],
      recommend: [],
      question: [],
      hots: [],
      videos: [],
      CatArticles: [],
			Friendlink: [],
			Susers:[],
			Sarticles: [],
			hottabs: 'video',
			activeName: 'demand',
      SupplyList: [],
			DemandList: [],
			LoadingDemandlist: true,
			LoadingBanner: true,
			LoadingRL: true,
			LoadingQuestion: true,
			LoadingHot: true,
			LoadingCollist: true,
    };
  },
	components: {
    vueSeamlessScroll
  },
  mounted() {
    this.getBanner();
    this.getRecommends();
    this.getFishquestion();
    this.getHots();
    this.getCatArticles();
		this.getFriendlink();
		this.getSummary();
		this.getSupplyList();
		this.getDemandList();
  },
  methods: {
    getBanner() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/banners")
        .then(response => {
					this.Banners = response.data.response_data.data.banners;
					this.LoadingDemandlist = false;
        });
    },
    getRecommends() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/recommends")
        .then(response => {
					this.recommend = response.data.response_data.data.recommends;
					this.LoadingRL = false;
        });
    },
		getSupplyList() {
      return axios
        .get("https://service.tongwei.cn/v1.3/3.1/pc/portal/supply/list",{
          params: {
            page: 1,
            size: 12
          }
        })
        .then(response => {
          this.SupplyList = response.data.response_data.data;
        });
    },
    getDemandList() {
      return axios
        .get("https://service.tongwei.cn/v1.3/3.1/pc/portal/demand/list",{
          params: {
            page: 1,
            size: 12
          }
        })
        .then(response => {
					this.DemandList = response.data.response_data.data;
					this.LoadingDemandlist = false;
        });
		},
    getFishquestion() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/question/list?size=10")
        .then(response => {
					this.question = response.data.response_data.data;
					this.LoadingQuestion = false;
        });
    },
    getHots() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/hots")
        .then(response => {
					this.hots = response.data.response_data.data.hots.articles;
					this.videos = response.data.response_data.data.hots.videos;
					this.LoadingHot = false;
        });
    },
    getCatArticles() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/categoryArticles")
        .then(response => {
					this.CatArticles = response.data.response_data.data.categoryArticles;
					this.LoadingCollist = false;
        });
    },
		getFriendlink() {
      return axios
        .get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/friendlink")
        .then(response => {
          this.Friendlink = response.data.response_data.data;
        });
		},
		getSummary() {
      return axios
				.get("https://service.tongwei.cn/v1.3/2.0/webapp/portal/summary")
        .then(response => {
					this.Susers = response.data.response_data.data.summary.users;
					this.Sarticles = response.data.response_data.data.summary.articles;
        });
		},
		MQservice(){
			meiqia_is_init==0 ? _MEIQIA('init') : showContactService();
		},
		gototop(){
			$('html,body').animate({
				scrollTop: 0
			}, 700);
		}
  },
	computed: {
    classOption: function () {
      return {
        step: 0.5,
        limitMoveNum: 5
      }
    }
  }
};
var meiqia_is_init = 0;
</script>

<style>
@import url("../../styles/common/portal/index.css");
</style>